<div id="content_header">
  <h3>Register a new course</h3>
</div>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="courseForm" role="form" ng-submit="addCourse()">

      <div class="form-group" ng-class="{ 'has-error': errors.Code}">
        <label class="required" for="Code">Code</label>
        <span class="error" ng-show="courseForm.Code.$error.required">Required!</span>
        <input type="text" name="Code" class="form-control" id="Code" placeholder="Input field" ng-model="courseNew.Code">
        <error-widget field="errors.Code"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Sequence}">
        <label class="required" for="Sequence">Course Level</label>
        <input type="number" class="form-control" name="Sequence" id="Sequence" ng-model="courseNew.Sequence">
        <error-widget field="errors.Sequence"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Name}">
        <label class="required" for="Name">Course Name</label>
        <span class="error" ng-show="courseForm.Name.$error.required">Required!</span>
        <input type="text" name="Name" class="form-control" id="Name" placeholder="Input field" ng-model="courseNew.Name">
        <error-widget field="errors.Name"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.CourseType}">
        <label class="required" for="CourseType">Course Type</label>
        <select name="CourseType" class="form-control" id="CourseType" ng-model="courseNew.CourseType.Id" ng-options="coursetype.Id as coursetype.Code +' - '+ coursetype.Name for coursetype in coursetypes">
          <option value="" ng-hide="courseNew.CourseType.Id">Select a Course Type.</option>
        </select>
        <error-widget field="errors.CourseType"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</div>